<template>
  <div class="home" v-if="category">
    <nav-bar></nav-bar>
    <div class="categorytab">
      <div class="category-ico" @click="$router.push('/editcategory')"><van-icon name="setting-o" /></div>
      <van-tabs v-model="active" swipeable sticky animated>
        <van-tab v-for="(item,index) in category" :key="index" :title="item.title">
          <van-list
            v-model="item.loading"
            :immediate-check="false"
            :finished="item.finished"
            finished-text="我也是有底线的"
            @load="onLoad"
          >
            <div class="detailparent">
              <Detail
                class="detailitem"
                :detailitem="categoryitem"
                v-for="(categoryitem,categoryindex) in item.list"
                :key="categoryindex"
              />
            </div>
          </van-list>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
  import NavBar from "../components/common/NavBar";
  import Detail from "./Detail"
  export default {
    data() {
      return {
        category: [],
        active: 0
      };
    },
    components: {
      NavBar,
      Detail
    },
    //使用keepalive时，回退界面不再会调用creat方法，可以使用activated方法判断是否渲染修改后的栏目
    activated() {
      if(localStorage.getItem('newCat')) {
        let newCat = JSON.parse(localStorage.getItem('newCat'))
        this.category = this.changeCategory(newCat)
        console.log(this.category)
        this.selectArticle();
      }
    },
    methods: {
      //导航数据
      async selectCategory() {
        if(localStorage.getItem('newCat')) {
          return
        }
        const res = await this.$http.get("/category");
        this.category = this.changeCategory(res.data);//category里面还有每个栏目的数据

        this.selectArticle();
      },
      //改造res里面的data，添加list数组
      changeCategory(data) {
        const category1 = data.map((item, index) => {
          item.list = [];
          item.page = 0;
          item.finished = false;
          item.loading = true;
          item.pagesize = 10;
          return item;
        });
        return category1;
      },
      //获取文章
      async selectArticle() {
        const categoryitem = this.categoryItem();
        const res = await this.$http.get("/detail/" + categoryitem._id, {
          params: {
            page: categoryitem.page,
            pagesize: categoryitem.pagesize
          }
        });
        categoryitem.list.push(...res.data);
        categoryitem.loading = false;
        if (res.data.length < categoryitem.pagesize) {
          categoryitem.finished = true;
        }
      },
      //滑动到最底部时自动调用此方法
      onLoad() {
        const categoryitem = this.categoryItem();
        setTimeout(() => {
          categoryitem.page += 1;
          this.selectArticle();
        }, 1000);
      },
      //获取不同active相应的item
      categoryItem() {
        const categoryitem = this.category[this.active];
        return categoryitem;
      }
    },
    watch: {
      active() {
        const categoryitem = this.categoryItem();
        if (!categoryitem.list.length) {
          this.selectArticle();
        }
      }
    },
    created() {
      this.selectCategory();

    }
  };
</script>

<style lang="less">
  .home {
    background-color: white;
  }
  .detailparent {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .detailitem {
      margin: 1.389vw 0;
      width: 45%;
    }
  }
  .categorytab{
    position: relative;
    .category-ico{
      position: absolute;
      z-index: 5;
      right: 0;
      top: 1.944vw;
      padding: 1.389vw 2.778vw;
      background-color: white;
    }
  }
</style>
